<template>
	<view class="machine-monitor-content bg">
		<u-sticky>
			<view class="header-box">
				<view class="header-box-item" @click="selectWorkshopPopupOptionState = true" style="border-right: solid 1rpx #5c7cf7;">
					<view class="header-box-item-val">{{ searchParams.workshopName || '暂无' }}</view>
					<u-icon name="arrow-down" size="14" color="#c5c8ce"></u-icon>
				</view>
				<view class="header-box-item" @click="selectProcessPopupOptionState = true">
					<view class="header-box-item-val">{{ searchParams.processName || '工序' }}</view>
					<u-icon name="arrow-down" size="14" color="#c5c8ce"></u-icon>
				</view>
			</view>
            <view style="padding: 24rpx 32rpx;background: #fff;">
                <view class="legend-box">
                    <!--<view v-for="item in stateList" :key="item.name" class="legend-box-item">
                        <view class="legend-box-item-title">
                            <view class="legend-box-item-circle" :style="{ background: item.color }"></view>
                            <view>{{ item.name }}</view>
                        </view>
                        <view class="legend-box-val">{{ item.count }}</view>
                    </view>-->
                    <view class="legend-box-item">
                        <view class="legend-box-item-title">
                            <view class="legend-box-item-circle" :style="{background: '#5cadff'}"></view>
                            <view>总机台</view>
                        </view>
                        <view class="legend-box-val">{{ stateList['0'].count + stateList['2'].count + stateList['3'].count }}</view>
                    </view>
                    <view class="legend-box-item">
                        <view class="legend-box-item-title">
                            <view class="legend-box-item-circle" :style="{background: stateList['2'].color}"></view>
                            <view>开台</view>
                        </view>
                        <view class="legend-box-val">{{ stateList['2'].count }}</view>
                    </view>
                    <view class="legend-box-item">
                        <view class="legend-box-item-title">
                            <view class="legend-box-item-circle" :style="{background: stateList['3'].color}"></view>
                            <view>待机</view>
                        </view>
                        <view class="legend-box-val">{{ stateList['3'].count }}</view>
                    </view>
                    <view class="legend-box-item">
                        <view class="legend-box-item-title">
                            <view class="legend-box-item-circle" :style="{background: stateList['0'].color}"></view>
                            <view>离线</view>
                        </view>
                        <view class="legend-box-val">{{ stateList['0'].count }}</view>
                    </view>
                </view>
            </view>
		</u-sticky>
		<view class="monitor-content">
			<view class="margin-top-10">
				<u-loading-icon :show="contentLoading"></u-loading-icon>
			</view>
			<view v-show="!contentLoading">
				<view v-for="(item) in machineMonitorList" :key="item.processName" class="machine-category-item">
					<view class="machine-category-item-header">
						<view class="machine-category-item-process-icon"></view>
						<view class="machine-category-item-process-name">{{ item.processName }}</view>
					</view>
					<view class="machine-list-container">
						<view
                            class="machine-item"
                            v-for="(machineItem) in item.machineRunStateList" :key="machineItem.machineCode"
							@click="onDetailBtn(machineItem)"
                            hover-class="hover-class"
                            :style="{ background: setMachineState(machineItem).color }"
                        >{{ machineItem.machineName }}</view>
					</view>
				</view>
			</view>
		</view>
		<detail-modal
            :modal-state="detailModalState"
            :selectedMachineItem="selectedMachineItem"
			@on-close="detailModalState = false"
        ></detail-modal>

        <jkPopupOption
            :value="searchParams.workshopId"
            :show="selectWorkshopPopupOptionState"
            :optionList="workshopList"
            :show-all="false"
            @visible-change="(e) => selectWorkshopPopupOptionState = e"
            @confirm="onConfirmOfSelectWorkshop"
        ></jkPopupOption>
        <jkPopupOption
            :value="searchParams.processCode"
            :show="selectProcessPopupOptionState"
            :optionList="processList"
            :option-id-key-name="'code'"
            @visible-change="(e) => selectProcessPopupOptionState = e"
            @confirm="onConfirmOfSelectProcess"
        ></jkPopupOption>
	</view>
</template>

<script>
	import {
		machineManagerMachineGetRunState,
	} from "../../../api";
	import detailModal from './components/detailModal';
	import {
		pageConfig
	} from "../../../utils/jk-utils";
    import jkPopup from "../../../jk-components/jk-popup";
    import jkPopupOption from "../../../jk-components/jk-popup-option";
	export default {
		components: {
            jkPopupOption,
            jkPopup,
			detailModal
		},
		data() {
			return {
                selectWorkshopPopupOptionState: false,
                selectProcessPopupOptionState: false,
                interVal: {},
                processList: [],
				workshopList: [],
				contentLoading: false,
				detailModalState: false,
				selectedMachineItem: {},
                totalCount: 0,
                searchParams: {
					pageNo: 1,
					pageSize: pageConfig.pageSize,
					machineNameOrCode: '',
					workshopId: null,
					workshopName: '',
					processCode: '',
					processName: ''
				},
                stateList: {
                    0: { name: '离线', color: '#808695', icon: 'el-icon-warning-outline', count: 0 },
                    2: { name: '开机', color: '#19be6b', icon: 'el-icon-video-play', count: 0 },
                    3: { name: '待机', color: '#ff9900', icon: 'el-icon-video-pause', count: 0 },
                },
				machineMonitorList: []
			}
		},
		methods: {
            onConfirmOfSelectProcess(e, item) {
                this.$set(this.searchParams, 'pageNo', 1);
                this.$set(this.searchParams, 'processCode', item.code);
                this.$set(this.searchParams, 'processName', item.name);
                this.selectProcessPopupOptionState = false;
                this.contentLoading = true;
                this.getListRequest();
            },
            onConfirmOfSelectWorkshop(e, item) {
                this.$set(this.searchParams, 'pageNo', 1);
                this.$set(this.searchParams, 'workshopId', item.id);
                this.$set(this.searchParams, 'workshopName', item.name);
                this.selectWorkshopPopupOptionState = false;
                this.contentLoading = true;
                this.getListRequest();
            },
			onDetailBtn(item) {
				this.selectedMachineItem = item;
				this.detailModalState = true;
			},
			setMachineState(item) {
				let config = {};
                config.color = this.stateList[item.state] ? this.stateList[item.state].color : '';
                return config;
			},
            clearInterVal() {
                clearInterval(this.interVal);
            },
            run() {
			    this.clearInterVal();
			    this.interVal = setInterval(() => {
			        this.getListRequest();
                }, 2000);
            },
			async getDependentData() {
				this.contentLoading = true;
                this.processList = getApp().globalData.defaultProcess.list;
                this.workshopList = getApp().globalData.defaultWorkshop.list;
				await this.getListRequest();
				this.contentLoading = false;
			},
			getListRequest() {
			    if (this.searchParams.workshopId) {
                    return machineManagerMachineGetRunState({
                        workshopIds: this.searchParams.workshopId,
                        processCode: this.searchParams.processCode
                    }).then(res => {
                        this.contentLoading = false;
                        if (res.data.status === 200) {
                            let resData = res.data.res || [];
                            this.machineMonitorList = resData.length ? res.data.res[0].processList || [] : [];
                            for(let key in this.stateList) {
                                if (this.stateList[key]) {
                                    this.stateList[key].count = 0;
                                }
                            }
                            resData.forEach(x => {
                                x.processList.forEach(processItem => {
                                    processItem.machineRunStateList.forEach(k => {
                                        this.stateList[k.state].count++;
                                    })
                                })
                            })
                        }
                    })
                }
			},
		},
        onLoad() {
            if (!this.searchParams.workshopId) {
                this.$set(this.searchParams, 'workshopId', getApp().globalData.defaultWorkshop.id);
                this.$set(this.searchParams, 'workshopName', getApp().globalData.defaultWorkshop.name);
            }
        },
        onUnload() {
            this.clearInterVal();
        },
        onHide() {
            this.clearInterVal();
        },
        onShow() {
            this.getDependentData();
            this.run();
        }
	}
</script>
<style lang="scss" scoped>
	.hover-class {
		background: rgba(92, 107, 227, .8) !important;
		color: #fff;
	}

	.machine-monitor-content {
		width: 100%;
		height: 100vh;
        overflow: auto;

		.monitor-content {
			padding: 0 32rpx 32rpx 32rpx;

			.machine-category-item {
				margin-top: 20rpx;

				.machine-list-container {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					border-top: solid 1rpx #eee;
					border-left: solid 1rpx #eee;

					.machine-item {
						width: calc(100% / 4);
						height: 74rpx;
						border-right: solid 1rpx #eee;
						border-bottom: solid 1rpx #eee;
						box-sizing: border-box;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 24rpx;
						color: #fff;
					}
				}

				.machine-category-item-header {
					height: 54rpx;
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					.machine-category-item-process-name {
						font-size: 30rpx;
					}

					.machine-category-item-process-icon {
						width: 8rpx;
						height: 100%;
						background: #3c9cff;
						border-radius: 10rpx;
						margin-right: 10rpx;
					}

				}
			}

		}
        .legend-box {
            border-radius: 20rpx;
            background: #708bf5;
            display: flex;
            justify-content: space-between;
            align-content: center;

            .legend-box-item {
                width: calc(100% / 4);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding: 18rpx 0;

                .legend-box-item-title {
                    color: #bdc9fa;
                    font-size: 24rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .legend-box-item-circle {
                        width: 10rpx;
                        height: 10rpx;
                        background: #3c9cff;
                        border-radius: 50%;
                        margin-right: 10rpx;
                    }
                }

                .legend-box-val {
                    margin-top: 10rpx;
                    color: #fff;
                    font-size: 36rpx;
                    font-weight: 700;
                }
            }
        }

		.header-box {
			width: 100%;
			height: 84rpx;
			background: #5267F6;
			position: relative;
			display: flex;
			justify-content: center;

			.header-box-item {
				width: 50%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.header-box-item-title {
					color: #c5c8ce;
					font-size: 24rpx;
				}

				.header-box-item-val {
					font-size: 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					margin-right: 8rpx;
				}
			}

		}
	}
</style>
